<template>
	<div class="cteam w1400">
		<ul>
			<li v-for="item in data" :key="item.id">
				<div class="cteaml fl">
					<a @click="jump(item)" target="_blank">
						<div class="img"><img class="lazy" :src="item.thumb">
						</div>
						<div class="tit onlinec_g" data-id="6730">联系TA</div>
					</a>
				</div>
				<div class="cteamr fr">
					<div class="cteamrt">
						<div class="cteamrtl fl">
							<div class="tit">{{item.title}}</div>
							<div class="info">总设计师</div>
						</div>
						<div class="cteamrtr fr"><a @click="jump(item)">查看详情</a></div>
						<div class="cl"></div>
					</div>
					<div class="con">
						<div class="con_tit textHidden">设计风格: {{item.works}}</div>
						<div class="con_info"><span>{{item.content}}</span></div>
					</div>
					<div class="ctlist">
						<dl>
							<dd><a href="#" target="_blank">
									<img class="lazy" src="../../assets/rp1.jpg"></a>
							</dd>
							<dd><a href="#" target="_blank">
									<img class="lazy" src="../../assets/rp2.png"></a>
							</dd>
							<dd><a href="#" target="_blank">
									<img class="lazy" src="../../assets/rp1.jpg"></a>
							</dd>
						</dl>
					</div>
				</div>
				<div class="cl"></div>
			</li>
		</ul>


	</div>
</template>

<script setup>
	import {
		useRouter
	} from 'vue-router'; // 引入 useRouter

	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		}
	});
	const router = useRouter(); // 获取路由实例
	const jump = (item) => {
		router.push({
			name: 'designerDetail',
			query: {
				id: item.id
			}
		}); 
	}
</script>

<style scoped lang="less">
	.w1280 {
		width: 1400px;
		margin: 0 auto;
	}

	.cteam {
		padding: 30px 0;

		ul {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;

			li {
				background: #fff;
				padding: 30px;

				.cteamr {
					width: 420px;
					height: auto;

					.ctlist {
						dl {
							display: flex;
							gap: 10px;

							dd a {
								display: block;
								width: 133px;
								overflow: hidden;
								background: #f1f1f1;

								&:hover {
									img {
										-webkit-transform: scale(1.15);
										transform: scale(1.15);
									}
								}


								img {
									width: 100%;
									display: block;
									-webkit-transition: all ease .3s;
									transition: all ease .3s;
								}
							}
						}
					}

					.con {
						margin: 6px auto 14px auto;

						.con_tit {
							font-size: 14px;
							line-height: 28px;
							color: #999999;
						}

						.con_info {
							font-size: 12px;
							line-height: 22px;
							color: #999999;

							span {
								color: #777777;
							}
						}
					}

					.tit {
						font-size: 18px;
						line-height: 32px;
						color: #272727;

					}

					.info {
						padding-left: 17px;
						line-height: 26px;
						background: url(../../assets/imgs/team_icon2.png) no-repeat left 50%;
						color: #999999;
						font-size: 14px;
					}

					.cteamrtr a {
						display: block;
						width: 110px;
						height: 40px;
						line-height: 40px;
						text-align: center;
						font-size: 14px;
						border: 1px #999999 solid;
						color: #666666;
						transition: all .3s;
						cursor: pointer;

						&:hover {
							color: #fff;
							background: #e50120;
							border: 1px #e50120 solid;
						}
					}
				}

				.cteaml {
					width: 180px;
					height: auto;

					a {
						display: block;
						position: relative;
						z-index: 1;

						&:hover {
							img {
								-webkit-transform: scale(1.15);
								transform: scale(1.15);
							}

							.tit {
								opacity: 1 !important;
							}
						}

						.tit {
							width: 100%;
							height: 100%;
							line-height: 220px;
							background: url(../../assets/imgs/team_icon1.png) no-repeat 46px 50% rgba(0, 0, 0, 0.1);
							font-size: 16px;
							color: #fff;
							text-indent: 75px;
							position: absolute;
							z-index: 2;
							left: 0;
							bottom: 0;
							opacity: 0;
							-webkit-transition: all ease .3s;
							transition: all ease .3s;
						}

						.img {
							width: 180px;
							height: 220px;
							overflow: hidden;
							background: #f1f1f1;


							img {
								width: 100%;
								display: block;
								-webkit-transition: all ease .3s;
								transition: all ease .3s;


							}
						}
					}
				}
			}
		}
	}
</style>